Shadertoy - The Online Shader Editor

Written by Magic of Nah-Kolor

IQ of RGBA explains what Shadertoy is all about.

The beginning of Shadertoy

Shadertoy is a website built to provide computer graphics developers and hobbyists with a great platform to prototype, experiment, teach, learn, inspire and share their creations with the community. To teach and learn from the best shader developers. But also to connect by commenting and discussing. If you don't know what a shader is: they are small programs designed specifically for graphics (strong focus on entities such as vertices and pixels) that are linked into the OpenGL pipeline and most often executed on the graphic card. The Shadertoy website originates from 2009. Hugi contacted IQ of RGBA to have a talk about shadertoy.com. We wanted to learn for example what the idea behind shadertoy was back then and who exactly founded and created it.

"I made the first version of Shadertoy back in 2009. When WebGL was anounced, a week later I implemented it. It was the first online shader editor out there (much before heroku, sandbox, and others). I got lots of shaders from demosceners who donated them to me, and I put them as examplers/templates", IQ explains and continues: "The new Shadertoy was made a year ago now, between me and my friend Pol Jeremias. We added all the aspects that the old Shadertoy lacked: the social aspect, the notion of a user with a profile, sharing, embedding of shaders in other webs, forums, etc. We wanted to do the Youtube of coders, same format, but a place where you can look up for things like 'fractal' and 'raymarcher'. Right now we are at 60% of completion. We miss many important features, and we want to finish those before calling it a day Since we do this only in our spare time and when we feel like it, development is slow. Plus we are both C++ coders, so we are learning PHP, JS, CSS, paatche, https, jason and all these things as we go (we are not using any framework for building the site, not even jquery, so all takes long)."

What is Shadertoy all about?

Of course a site like shadertoy is mostly interesting for coders to share their shaders. But it's a feast for the eyes to look at all the eye candy. Especially from a demoscene perspective. So what is Shadertoy all about? What is this website exactly all about? IQ comments: "About WHAT the site is... It's a place for the community to share their code porn. This means people upload their content and realtime effects, BUT also their code. You cannot skip uploading the code. So your code is exposed to others' eyes, Which is good because you learn from their comments, and they learn from you. Since all the code and images are run in realtime, it's very intuitive to explore and change somebody else's code and learn. There's a big overlap of course. One of the things we have very, VERY consciously done in Shadertoy is to limit the platform. People cannot upload their own textures or meshes. Hence users have to think out of the box in order to create distinct visuals. Yet the variety is amazing, and the cleverness oustanding. We have developed algorithms for depth of field, antialias of softshadows without multipass, for example. It's like when in the demoscene you impose yourself the limitation of doing something in 4 kilobytes, or 64k. It forces you to be creative and think different. In that sense demosceners will find it fascinating and fun. Of course, many of the shaders in Shadertoy can be copy&pasted into a 4-kilobyte intro framework and voilą, you get a 4k intro. We already have many sceners contributing to Shadertoy regularly. There are a few I could name. For example 'Statix' (remember 303? - if I wanted to brag)."

IQ started a personal quest. A goal to make 1 mathematical image every week for 52 weeks in a row. How is he making them? All of them using Shadertoy? Hugi also wanted to know from IQ if Shadertoy could provide new ways of doing realtime effects. It was time to ask IQ these two questions. IQ tells us: "Yes, they are made in Shadertoy, that's why they are simple, No multipass, no geometry, they are quick sketches made online at lunch time from the browser. I don't think Shaderoy can provide new ways of doing realtime effects. People there sharing their things will, but so do they when they create demos in the demoscene, or games in their companies. Shadertoy is one more place to hang out"

Some of the best shaders on Shadertoy.com

Of course Hugi wanted to know about some of the best work shared on shadertoy. We put some examples from IQ and others as illustration in this article and they are mindblowing! Also see some of the links at the end of this article. When asked IQ gave his oppinion about some of the best Shadertoy shaders. IQ explains: "In visual terms probably this. But in terms of new algorithms and research: eiffie's, fizzer and tekF's shaders. In terms of exploting the limits, there's a few crazy CRAZY stuff being done stateless, like this bouncing ball."

At the end of this article you can find a shadertoy collage with some of the best shaders presented on shadertoy.com. Now, at this point in this article we will show you three shaders Hugi found massively great! Two of them are by IQ and one is by Fizzer of Titan.

Shadertoy Anniversary and Hackathon

On the 25th of february 2014 it was a year ago that Beautypi released the first iteration of Shadertoy. Since than there are 1,858 listed shaders and thousands of visitors every day from around the globe. "What really makes this website special is that we learn new techniques every day, things we never even thought were possible. We learn stories about people contributing from very remote places and we learn that limitations make us think outside of the box. We thank every single one of you", is written on the official Shadertoy facebook page.

On March 19th 2014 from 06:30 PM till 09:00 the very first Shadertoy Hackathon was held in San Fransisco USA. According to the Shadertoy website it was the first world-competition ever to find out who can write the best shader in 60 minutes. Asking IQ about the Shadertoy Hackaton and what it's all about before the Hackaton was held he says "It's a Hackaton that we are organizing. There's not much more than that to it. If you don't know what a hackaton is read here."

Are you curious about the results of the Shadertoy Hackaton and do you want to see what great Shaders it resulted in? Hugi has the end results right here for you:

- Best technical shader: "Thing" by P_Malin
- Most artistic shader: "supchik" by w32
- Most original shader: "Germs" by HLonrenzi
- BEST SHADER: "Cellular" by vug

Epilogue

Before we wave goodbye to IQ and Shadertoy Hugi wants to know if IQ can give some advice to our readers on the demoscene and beyond. What can IQ tell to those who want to actively participate in Shadertoy.com? IQ comments: "The advice is that, in fact, demosceners are pretty much ready to jump in and impress the world with their skills and pretty effects. The only thing they need as an advice is to stop being ashamed of their coding and be fine with having the code up there open to the public (many demoscene coders, including me, have been embarrased of their ugly coding style and repractices for a long time I think) No more advices really, demosceners will find Shadertoy a very natural platform for experimenting, showing off and learning, with demo effects."

In alot of articles featured in Hugi, in the last paragraph, we are curious about how things will develope looking into the future. For Shadertoy we didn't make any exceptions this time. So... how does IQ see the future of shadertoy.com on the long run? "Right now the horizon of future planings is just 3 months ahead, I've no idea what will happen with Shadertoy", IQ explains and concludes: "Hopefully it will be active for a long, long time."

Hugi wishes Shadertoy.com and IQ a happy anniversary and many, many good years to come!

Links related to this article

Official website
Shadertoy Facebook page
The Popular Shader
Formulanimations created by IQ on Shadertoy
Shadertoy on Pouet.net

IQ & Magic